/*
  开发环境配置：能让代码运行
    运行项目指令：
      webpack 会将打包结果输出出去
      npx webpack-dev-server 只会在内存中编译打包，没有输出
*/
const {resolve}=require('path')
const HtmlWebpackPlugin=require('html-webpack-plugin')
 const {VueLoaderPlugin}=require('vue-loader')
module.exports={
  entry:'./main.js',
  output:{
    filename:'./js/build.js',
    path:resolve(__dirname,'built')
  },
  module:{
    rules:[
      // loader配置
       {
        test:/\.vue$/,
      loader:'vue-loader'
      },
      {
        test:/\.less$/,
        use:[
          'style-loader',
          'css-loader',
          'less-loader'
        ]
      },
      {
        test:/\.css$/,
        use:[
          'style-loader',
          'css-loader'
        ]
      },
      // 处理图片资源
      {
        test:/\.(jpg|png|gif)$/,
        loader:'url-loader',
        options:{
          limit:8*1024,
          name:'[hash:10],[ext]',
          // 关闭es6模块化
          esModule:false,
          outputPath:'imgs'
        }
      },
      {
        // 处理html中img资源
        test:/\.html$/,
        loader:'html-loader'
      },
      {
        // // 处理其他资源           当时用vue时会把vue当做其他资源进行匹配
        // exclude:/\.(less|js|css|html|jpg|png|gif)$/,
        // loader:"file-loader",
        // options:{
        //   name:'[hash].[ext]',
        //   outputPath:'media'
        // }
      },
      {
        // 处理字体等资源
        test:/\.ttf|woff|woff2|eot|svg$/,
        use:'url-loader'
      }
     
    ]
  },
  plugins:[
    new HtmlWebpackPlugin({
      template:'./index.html'
    }),
   new VueLoaderPlugin()
  ],
  mode:'development',
  devServer:{
    contentBase:resolve(__dirname,'built'),
    compress:true,
    port:4000,
    open:true
  }
}